<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f9f1;
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #2d5d2c;
      margin-top: 40px;
      font-size: 28px;
      letter-spacing: 1px;
    }

    #barChartDiv {
        width: 900px;
        height: 550px;
        margin: 40px auto;
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 8px 20px rgba(0, 100, 0, 0.08);
    }

    /* 自定义工具提示样式 */
    .custom-tooltip {
      background-color: rgba(255, 255, 255, 0.95);
      border: 1px solid #d6ead6;
      border-radius: 8px;
      padding: 10px;
      color: #3a603a;
      font-weight: 500;
    }
  </style>
</head>
<body>
<h2 style="text-align: center;">🌿 联系人分类统计分析</h2>

<div id="barChartDiv"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
  const pieData = [];

  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]]
      categories.push(name);
      const value = item[key];
      pieData.push({
          name: name,
          value: value
      });
  }

  // 初始化 ECharts 实例
  const barChart = echarts.init(document.getElementById('barChartDiv'));

  // 清新自然主题配色
  const naturalColors = ['#88c9a1', '#6dd47e', '#42b983', '#3a9d6b', '#2f805a'];

  // 配置项
  const barOption = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#d6ead6',
            textStyle: {
                color: '#3a603a'
            },
            formatter: function(params) {
                return `<div style="padding: 10px; border-radius: 5px; background: #fff; border: 1px solid #d6ead6">
                        <div style="margin-bottom: 5px; font-weight: bold">${params[0].name}</div>
                        <div>${params[0].marker} ${params[0].seriesName}: <span style="color: #42b983">${params[0].value}</span></div>
                        </div>`;
            }
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLabel: {
                rotate: 30,
                color: '#3a603a',
                fontSize: 13
            },
            axisLine: {
                lineStyle: {
                    color: '#d6ead6'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#3a603a',
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: '#e8f3ec',
                    type: 'dashed'
                }
            }
        },
        grid: {
            left: '10%',
            right: '8%',
            bottom: '15%',
            top: '12%'
        },
        series: [
            {
                name: '联系人数量',
                type: 'bar',
                data: pieData,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: '#a8e0a2'},
                            {offset: 1, color: '#88c9a1'}
                        ]
                    },
                    borderRadius: 8
                },
                barWidth: 24,
                label: {
                    show: true,
                    position: 'top',
                    color: '#42b983',
                    fontWeight: 'bold',
                    fontSize: 14,
                    formatter: '{c}'
                },
                emphasis: {
                    itemStyle: {
                        color: '#42b983'
                    }
                }
            }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function(idx) {
            return idx * 20;
        }
    };


  // 使用配置项
  barChart.setOption(barOption);

  // 响应式调整
  window.addEventListener('resize', function() {
    barChart.resize();
  });
  /*]]>*/
</script>
</body>
</html>